<!--
 * @Author: your name
 * @Date: 2021-09-08 09:56:37
 * @LastEditTime: 2021-09-12 16:16:13
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \tui-hui-web\pages\pc\index.vue
-->
<template>
    <div class="pc-index">
        <div class="index-box-1">
            <el-carousel height="100vh">
                <el-carousel-item>
                    <div class="center-box">
                        <img src="@/static/images/pc/bg-1.png" alt="" />
                        <p>实体经济数字化运营升级服务商，全流程私域流量运营解决方案提供商，致力于帮助客户数字化改造以及提高私域流量运营能力。123</p>
                        <nuxt-link to="/" class="btn flex-row-c-c">免费试用</nuxt-link>
                    </div>
                    <img class="bg-img" :src="`${$imgPath}/tuihu/swiper-1.png`" />
                </el-carousel-item>
                <el-carousel-item>
                    <div class="center-box">
                        <img src="@/static/images/pc/bg-1.png" alt="" />
                        <p>实体经济数字化运营升级服务商，全流程私域流量运营解决方案提供商，致力于帮助客户数字化改造以及提高私域流量运营能力。</p>
                        <nuxt-link to="/" class="btn flex-row-c-c">免费试用</nuxt-link>
                    </div>
                    <img class="bg-img" :src="`${$imgPath}/tuihu/swiper-2.png`" />
                </el-carousel-item>
            </el-carousel>
        </div>
        <template>
            <!-- 推呼能为你做什么？ -->
            <div class="index-box-2 flex-row-c-c">
                <!-- 联系我们 -->
                <div class="call-me flex-row-c-b">
                    <div class="call-box flex-row">
                        <div class="call-left flex-row-sb-c">
                            <div class="introduce flex-row--c">
                                <img src="@/static/images/pc/icon-1.png" alt="" />
                                <span class="text">推呼TUIHU行业解决方案专家<span style="color: #c2c2c2">(SCRM)</span></span>
                            </div>
                            <nuxt-link class="link" to="/">联系洽谈</nuxt-link>
                        </div>

                        <div class="call-right flex-row-sb-c">
                            <div class="introduce flex-row--c">
                                <img src="@/static/images/pc/icon-2.png" alt="" />
                                <span class="text">推呼TUIHU单店版<span style="color: #c2c2c2">(体验版)</span></span>
                            </div>
                            <nuxt-link class="link" to="/">免费体验</nuxt-link>
                        </div>
                    </div>
                </div>

                <div class="center-main flex-row-c">
                    <img class="bk-left" :class="{ 'is-move': move[1] ? move[1].isMove : '' }" src="@/static/images/pc/bk-left.png" alt="" />
                    <div class="right">
                        <div class="top flex-col" :class="{ 'is-move': move[1] ? move[1].isMove : '' }">
                            <i class="line"></i>
                            <p class="title">推呼能为你做什么？</p>
                            <p class="p-1">推呼赋能新美业、新教培、新零售等行业，帮助企业客户持续增长。</p>
                            <p class="p-2">
                                推呼为企业客户提供全流程私域流量运营工具和咨询服务，构建以推呼平台为基础，涵盖推呼SCRM，推呼闭环商城，推呼全网媒体投放，推呼私域运营方案等产品；适用于微信群运营，客户行为管理，销售行为管理和微信生态数据打通等使用场景。
                            </p>
                        </div>
                        <img class="bk-right" src="@/static/images/pc/bk-right.png" alt="" />
                    </div>
                </div>
            </div>
            <!-- 企业生意难做的原因？ -->
            <div class="index-box-3 flex-row-c-c">
                <div class="middle flex-col--c">
                    <p class="top-title">企业生意难做的原因？</p>
                    <ul class="flex-row" :class="{ 'is-move': move[2] ? move[2].isMove : '' }">
                        <li
                            :class="[causeCurIndex === index ? 'add-class' : '']"
                            v-for="(item, index) in causeList"
                            :key="index"
                            @mouseover="changeActive(index)"
                            @mouseout="removeActive"
                        >
                            <div class="div-f">
                                <img class="icon" :src="causeCurIndex === index ? item.iconC : item.icon" alt="" />

                                <p class="box-title">{{ item.title }}</p>
                                <div class="text-main" v-for="(item2, index2) in item.text" :key="index2">
                                    <div class="text flex-row">
                                        <span class="serial">0{{ index2 }}</span>
                                        <p>{{ item2 }}</p>
                                    </div>

                                    <img class="bk-img" :class="[`bk-img-${index + 1}`]" :src="causeCurIndex === index ? item.bkImg2 : item.bkImg" alt="" />
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            <!-- 选择推呼，难题迎刃而解 -->
            <div class="index-box-4 flex-row-c-c">
                <div class="middle flex-col--c" :class="{ 'is-move': move[3] ? move[3].isMove : '' }">
                    <p class="top-title">企业生意难做的原因？</p>
                    <p class="text">
                        此时正面临行业竞争激烈严重内卷，此刻正是数字化建设大浪潮，马上使用推呼全流程私域流量数字化运营让企业更新迭代，
                        降本提效快速超越竞争对手。
                    </p>
                    <img src="@/static/images/pc/bg-4.png" alt="" />
                </div>
            </div>
            <!-- 在这里推呼SCRM，资深行业运营线上线下为企业出谋划策 -->
            <div class="index-box-5 flex-row-c-c">
                <div class="middle flex-col-c-c" :class="{ 'is-move': move[4] ? move[4].isMove : '' }">
                    <i class="line"></i>
                    <p class="p-1">在这里推呼SCRM，</p>
                    <p class="p-2">资深行业运营线上线下为企业出谋划策</p>

                    <ul class="flex-row">
                        <li>
                            <p>营销工具多场景触达，快速裂变获客，高效吸粉引流。</p>
                            <img class="icon" src="@/static/images/pc/home/icon--1.png" alt="" />
                        </li>
                        <li>
                            <p>数字化精细运营，大大降低运营成本，不断提高客户转化率。</p>
                            <img class="icon" src="@/static/images/pc/home/icon--1.png" alt="" />
                        </li>
                        <li>
                            <p>私域流量闭环打造，多渠道、多场景客户快速沉淀。</p>
                            <img class="icon" src="@/static/images/pc/home/icon--1.png" alt="" />
                        </li>
                        <li>
                            <p>客情管理-实时动态掌握客户情况，及时触达提升客户复购率。</p>
                            <img class="icon" src="@/static/images/pc/home/icon--1.png" alt="" />
                        </li>
                    </ul>

                    <div class="btn flex-row-c-c">立即定制方案</div>
                </div>
            </div>
            <!-- 多行业选择与推呼建立深度合作 -->
            <div class="index-box-6 flex-row-c">
                <div class="middle flex-col--c">
                    <i class="line"></i>
                    <p class="p-1">多行业选择与推呼建立深度合作</p>

                    <ul class="logo-list" :class="{ 'is-move': move[5] ? move[5].isMove : '' }">
                        <li class="logo-item" v-for="item in logoList" :key="item">
                            <img :src="item" alt="" />
                        </li>
                    </ul>
                </div>
            </div>
            <!-- 推呼SCRM 私域工具+专业运营 -->
            <div class="index-box-7 flex-row-c">
                <div class="middle flex-row-c-c">
                    <img class="left" src="@/static/images/pc/home/bottom.png" />
                    <div class="right flex-col--r">
                        <p>推呼SCRM 私域工具+专业运营</p>
                        <div class="btn flex-row-c-c">立即定制方案</div>
                    </div>
                </div>
            </div>
        </template>
    </div>
</template>

<script>
let logoList = []
for (let i = 1; i <= 23; i++) {
    logoList.push(require(`@/static/images/pc/home/logo/${i}.png`))
}
export default {
    name: 'indexPc',
    layout: 'default',
    components: {},
    head: () => ({ title: '推呼 SCRM' }),
    async asyncData() {},
    data() {
        return {
            logoList, //图片列表
            causeList: [
                {
                    title: '获客成本高',
                    icon: require('@/static/images/pc/home/icon-1.png'),
                    iconC: require('@/static/images/pc/home/icon-1-c.png'),
                    text: ['公域流量引流成本跨越式提升，达到不可支撑的地步', '行业内踊跃出大家玩家，竞争激烈内卷严重'],
                    bkImg: require('@/static/images/pc/home/bk-1.png'),
                    bkImg2: require('@/static/images/pc/home/bk-1-c.png'),
                },
                {
                    title: '不懂运营，难度大',
                    icon: require('@/static/images/pc/home/icon-2.png'),
                    iconC: require('@/static/images/pc/home/icon-2-c.png'),
                    text: ['企业内部没有建立运营团队', '运营团队水平参差不齐，达不到运营要求'],
                    bkImg: require('@/static/images/pc/home/bk-2.png'),
                    bkImg2: require('@/static/images/pc/home/bk-2-c.png'),
                },
                {
                    title: '客户流失严重',
                    icon: require('@/static/images/pc/home/icon-3.png'),
                    iconC: require('@/static/images/pc/home/icon-3-c.png'),
                    text: ['企业前期积累大量的客户，没有有效的渠道和方式触达', '触达后达不到客户需求流失严重，从此消失不再回头'],
                    bkImg: require('@/static/images/pc/home/bk-3.png'),
                    bkImg2: require('@/static/images/pc/home/bk-3-c.png'),
                },
                {
                    title: '客户复购率低',
                    icon: require('@/static/images/pc/home/icon-4.png'),
                    iconC: require('@/static/images/pc/home/icon-4-c.png'),
                    text: ['老客户只消费一次即沉默，老客户维护成本比新客还要高', '没有有效提升老客复购的运营思维和打法'],
                    bkImg: require('@/static/images/pc/home/bk-4.png'),
                    bkImg2: require('@/static/images/pc/home/bk-4-c.png'),
                },
            ],
            causeCurIndex: '', //当前高亮索引

            move: [],
        }
    },
    mounted() {
        let height = 0
        for (let i = 1; i <= 7; i++) {
            height += document.querySelector(`.index-box-${i}`).offsetHeight
            this.move.push({
                class: `index-box-${i}`,
                height: height, //到点触发动画
                isMove: false, //是否添加动画
            })
        }
        window.addEventListener('scroll', () => {
            // index-box-1触发
            console.log('document.documentElement.scrollTop :>> ', document.documentElement.scrollTop)
            console.log('this.move[1].height :>> ', this.move[0].height)
            const minus = 1.2
            if (document.documentElement.scrollTop >= this.move[0].height / minus / 2 || document.body.scrollTop >= this.move[0].height / minus / 2) {
                // if (this.move[1].isMove) return
                this.move[1].isMove = true
            }
            if (document.documentElement.scrollTop >= this.move[1].height / minus || document.body.scrollTop >= this.move[1].height / minus) {
                // if (this.move[2].isMove) return
                this.move[2].isMove = true
            }
            if (document.documentElement.scrollTop >= this.move[2].height / minus || document.body.scrollTop >= this.move[2].height / minus) {
                // if (this.move[3].isMove) return
                this.move[3].isMove = true
            }
            if (document.documentElement.scrollTop >= this.move[3].height / minus + 300 || document.body.scrollTop >= this.move[3].height / minus + 300) {
                // if (this.move[4].isMove) return
                this.move[4].isMove = true
            }
            if (document.documentElement.scrollTop >= this.move[4].height / minus || document.body.scrollTop >= this.move[4].height / minus) {
                // if (this.move[5].isMove) return
                this.move[5].isMove = true
            }
            if (document.documentElement.scrollTop >= this.move[5].height / minus || document.body.scrollTop >= this.move[5].height / minus) {
                // if (this.move[6].isMove) return
                this.move[6].isMove = true
            }
        })
    },
    methods: {
        changeActive(index) {
            this.causeCurIndex = index
        },
        removeActive() {
            this.causeCurIndex = ''
        },
    },
}
</script>

<style lang="scss" scoped>
.pc-index {
    overflow: hidden;
    .line {
        width: 44px;
        height: 6px;
        background: $color;
        border-radius: 6px;
    }
    /deep/.index-box-1 {
        position: relative;
        .center-box {
            position: absolute;

            left: 18%;
            top: 26%;
            overflow: hidden;
            width: 556px;
            img {
                width: 392px;
            }
            p {
                margin-top: 22px;
                width: 556px;
                height: 47px;
                font-size: 15px;
                font-weight: 400;
                line-height: 30px;
                color: #ffffff;
                letter-spacing: 2px;
                opacity: 0.8;
            }
            .btn {
                margin-top: 44px;
                width: 103px;
                height: 33px;
                background: $color;
                border-radius: 17px;
                font-size: 15px;
                color: #fff;
            }
        }
        .bg-img {
            width: 100%;
            display: block;
        }
        /*  .el-carousel {
            height: auto;
            overflow: visible;
            .el-carousel__item {
                overflow: visible;
            }
            .el-carousel__container{
              height: auto;
            }
        } */
    }
    .index-box-2 {
        position: relative;
        .call-me {
            position: absolute;
            left: 50%;
            top: -47px;
            z-index: 99;
            transform: translateX(-50%);
            width: 1023px;
            height: 83px;
            background: $color;
            box-shadow: 0px 20px 50px rgba(116, 116, 116, 0.06);
            border-radius: 61px;
            .call-box {
                width: 997px;
                height: 71px;
                background: #ffffff;
                box-shadow: 0px 6px 60px rgba(0, 0, 0, 0.06);
                border-radius: 52px;
                .call-left,
                .call-right {
                    // font-family: $font;
                    font-weight: bold;
                    margin: 14px 0;
                    padding: 0 24px;
                    flex: 1;
                    border-right: 2px solid #c2c2c2;
                    .introduce {
                        img {
                            width: 26.15px;
                        }
                        span {
                            margin-left: 7px;
                            &.text {
                                font-size: 15px;
                                color: #747474;
                            }
                        }
                    }
                    .link {
                        color: $color;
                        font-weight: bold;
                    }
                }
                .call-right {
                    border: none;
                }
            }
        }

        // background: url('~@/static/images/pc/bg-2.png') no-repeat center bottom;
        background-color: #fff;
        height: 900px;
        width: 100%;
        // background-size: 70%;

        .center-main {
            width: $min;
            .bk-left {
                width: 573px;
                transform: translateX(-250px);
                &.is-move {
                    transition: all 1s;
                    transform: translateX(0);
                }
            }
            .right {
                width: 446px;
                margin-left: 124px;

                .top {
                    transform: translateX(250px);
                    &.is-move {
                        transition: all 1s;
                        transform: translateX(0);
                    }
                    .title {
                        color: $color;
                        font-size: 36px;
                        font-weight: bold;
                        font-family: $font;
                        margin-top: 41px;
                    }
                    .p-1 {
                        font-size: 15px;
                        margin-top: 21px;
                        color: #747474;
                    }
                    .p-2 {
                        margin-top: 26px;
                        color: #c2c2c2;
                        font-size: 13px;
                        line-height: 30px;

                        letter-spacing: 2px;
                    }
                }
                img {
                    margin-top: 109px;
                    width: 400px;
                }
            }
        }
    }
    .index-box-3 {
        z-index: -2;
        background: url('~@/static/images/pc/bg-3.png') no-repeat;
        height: 800px;
        width: 100%;
        background-size: cover;
        .middle {
            width: $min;
            .top-title {
                font-size: 45px;
                color: #ffffff;
                font-family: $font;
                font-weight: bold;
            }
            ul {
                margin-left: -26px;
                transform: translateY(250px);
                &.is-move {
                    transition: all 1s;
                    transform: translateY(0);
                }
                li {
                    position: relative;
                    margin: 29px 26px;
                    width: 233px;
                    height: 258px;
                    background: linear-gradient(180deg, #ffffff 0%, #aeaeae 100%);
                    margin-left: 26px;
                    border-radius: 18px;
                    margin-top: 139px;
                    overflow: hidden;
                    .div-f {
                        position: absolute;
                        z-index: 1;
                        bottom: 23px;
                        left: 26px;
                        right: 26px;
                        top: 23px;
                        img {
                            &.icon {
                                width: 41.8px;
                            }
                            &.bk-img {
                                width: 80px;
                                position: absolute;
                                bottom: -71px;
                                right: -41px;
                                z-index: -1;
                                &.bk-img-2 {
                                    width: 115px;
                                    position: absolute;
                                    bottom: -47px;
                                    right: -65px;
                                }
                                &.bk-img-3 {
                                    width: 110px;
                                    position: absolute;
                                    bottom: -47px;
                                    right: -55px;
                                }
                                &.bk-img-4 {
                                    width: 115px;
                                    position: absolute;
                                    bottom: -47px;
                                    right: -65px;
                                }
                            }
                        }

                        .box-title {
                            margin-top: 23px;
                            font-size: 18px;
                            color: #000;
                            font-weight: bold;
                            // font-family: $font;
                        }
                        .text-main {
                            margin-top: 9px;
                            .text {
                                margin-top: 13px;
                                font-size: 12px;
                                line-height: 20px;
                                color: #222726;
                                letter-spacing: 1px;
                                .serial {
                                    color: #222726;
                                    opacity: 0.4;
                                }
                                p {
                                    margin-left: 7px;
                                }
                            }
                        }
                    }
                    &.add-class {
                        background: linear-gradient(180deg, #0090ff 0%, #1d9dff 100%);
                        .box-title {
                            color: #fff;
                        }
                        .text-main {
                            .text {
                                color: #ffffff;

                                .serial {
                                    color: #ffffff;
                                    opacity: 0.4;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    .index-box-4 {
        background-color: $color;
        height: 900px;
        width: 100%;
        .middle {
            width: $min;
            transform: translateY(250px);
            &.is-move {
                transition: all 1s;
                transform: translateY(0);
            }
            .top-title {
                font-size: 45px;
                color: #ffffff;
                font-family: $font;
                font-weight: bold;
            }
            .text {
                width: 900px;
                text-align: center;
                font-size: 15px;
                line-height: 50px;
                color: #ffffff;
                letter-spacing: 1px;
            }
            img {
                width: 900px;
                margin-top: 62px;
            }
        }
    }
    .index-box-5 {
        height: 800px;
        width: 100%;
        background-color: #fff;
        .middle {
            width: $min;
            transform: translateY(250px);
            &.is-move {
                transition: all 1s;
                transform: translateY(0);
            }
            .line {
                margin-bottom: 35px;
            }
            .p-1,
            .p-2 {
                font-size: 40px;
                line-height: 60px;
                color: #222726;
                letter-spacing: 1px;
            }
            ul {
                margin-top: 80px;
                margin-left: -15px;

                li {
                    background: url('~@/static/images/pc/home/box-5.png') no-repeat;
                    margin-left: 15px;
                    background-size: 100%;
                    width: 240px;
                    height: 262px;

                    display: flex;
                    flex-direction: column;
                    align-items: center;

                    // box-shadow: 0px 6px 40px rgba(34, 39, 38, 0.06);
                    p {
                        width: 205px;
                        font-size: 18px;
                        font-family: $font;
                        font-weight: bold;
                        line-height: 30px;
                        margin-top: 58px;
                        color: #222726;
                    }
                    img {
                        width: 66.6px;
                        margin-top: 20px;
                    }
                }
            }
            .btn {
                color: #fff;
                font-family: $font;
                font-weight: bold;
                padding: 9px 18px;
                background: linear-gradient(90deg, #0090ff 0%, #1d9dff 100%);
                margin-top: 56px;
                border-radius: 22px;
            }
        }
    }
    .index-box-6 {
        height: 900px;
        width: 100%;
        background-color: #fff;
        .middle {
            width: $min;

            .line {
                margin-bottom: 35px;
            }
            .p-1,
            .p-2 {
                font-size: 40px;
                line-height: 60px;
                color: #222726;
                letter-spacing: 1px;
            }
            .logo-list {
                display: flex;
                flex-wrap: wrap;
                margin-left: -17.5px;
                margin-top: 30px;
                padding-left: 87px;
                transform: translateY(250px);
                &.is-move {
                    transition: all 1s;
                    transform: translateY(0);
                }
                li {
                    margin: 35px;
                    img {
                        width: 80px;
                    }
                }
            }
        }
    }

    .index-box-7 {
        background-color: $color;
        .middle {
            width: $min;

            height: 340px;

            img {
                width: 230px;
            }
            .right {
                margin-left: 140px;
                p {
                    text-align: right;
                    width: 589px;
                    font-size: 35px;
                    font-family: $font;
                    font-weight: bold;
                    line-height: 80px;
                    color: #ffffff;
                    letter-spacing: 3px;
                }
                .btn {
                    color: $color;
                    font-family: $font;
                    font-weight: bold;
                    padding: 13px 25px;
                    background: linear-gradient(90deg, #ffffff 0%, #e8e8e8 100%);
                    margin-top: 56px;
                    border-radius: 22px;
                }
            }
        }
    }
}
</style>
